react router |

万物皆组件

react-router-dom 比 react-router 多了<Link> <BrowserRouter> 这样的 DOM 类组件。

react-router-dom 4.0 之后

<BrowserRouter>

一个使用了 HTML5 history API 的高阶路由组件，保证 UI 界面和 URL 保持同步

属性：

basename: string
作用：为所有位置添加一个基准URL
使用场景：假如你需要把页面部署到服务器的二级目录，你可以使用 basename 设置到此目录。

<BrowserRouter basename="/minooo" />
<Link to="/react" /> 
// 最终渲染为 
<a href="/minooo/react">

<Route>

<Route> 基本的职责就是当页面的访问地址与 Route 上的 path 匹配时，就渲染出对应的 UI 界面。

<Route> 自带三个 render method 和三个 props 。

import Navigation from "./components/Navigation/";
import Home from "./components/Home/";
import Search from "./components/Search/";

<Route path="/" component={Navigation} />
<Route path="/home" component={Home} />
<Route path="/search" component={Search} />

<Link>

单纯的跳转，无障碍导航。

to: string
作用：跳转到指定路径
使用场景：如果只是单纯的跳转就直接用字符串形式的路径。

1	<Link to="/courses" />

<NavLink>

<Link> 的特殊版，就是为页面导航准备的。因为导航需要有 “激活状态”。

activeClassName: string
导航选中激活时候应用的样式名，默认样式名为 active

<NavLink
  to="/about"
  activeClassName="selected"
>MyBlog</NavLink>

首页的导航栏可以选择用这个而不是 <Link>

React Router 4 中文版文档：http://reacttraining.cn/